
class Responsive {
  constructor() {
    this.target = null;
  }
  receive(data) {
    Object.keys(data).forEach(item => {
      let oldvalue = data[item];
      let dep = new Dep(this.target);
      Object.defineProperty(data, item, {
        get: () => {
          dep.collect();
          return oldvalue;
        },
        set: value => {
          oldvalue = value;
          dep.updated();
        }
      });
    });
  }
  Watch(func) {
    this.target = func;
    this.target();
    this.target = null;
  }
  render(data,func) {
    this.receive(data);
    this.Watch(func);
  }
}

class Dep {
  constructor(target) {
    this.subscribe = [];
    this.target = target;
  }
  collect() {
    if (this.target && !this.subscribe.includes(this.target)) {
      this.subscribe.push(this.target);
    }
  }
  updated() {
    this.subscribe.forEach(item => {
      item();
    });
  }
}

// function Receive(data){
//     Object.keys(data).forEach((item)=>{
//         let oldvalue = data[item];
//         let dep = new Dep();
//         Object.defineProperty(data,item,{
//             get:()=>{
//                 dep.collect();
//                 return oldvalue;
//             },
//             set:(value)=>{
//                 oldvalue = value;
//                 dep.updated();
//             }
//         })
//      })
// }
// Receive(data)
// function Watch(func){
//     target = func;
//     target()
//     target = null;
// }
// Watch(()=>{
//     c = data.a * data.b;
// })
